<template>
<div>
  <div>
    <van-image
        round
        width="10rem"
        height="10rem"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />

  </div>
  <div>

      <div>
        <!-- 可以使用 CellGroup 作为容器 -->
        <van-cell-group inset>
          <van-field v-model="user.phone" label="手机号：" placeholder="手机号" @change="checkPhone()"/>
          <van-field
              v-model="user.code"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="primary" :disabled="btn1" @click="sendCode()">发送验证码</van-button>
            </template>
          </van-field>
          <van-field type="password" v-model="user.password" label="新密码：" placeholder="新密码"/>
          <van-field type="password" v-model="psw" label="确认密码：" placeholder="确认密码" @change="checkPass()"/>
          <div style="margin: 16px;">
            <van-button round block type="success" :disabled="btn2" @click="findPass()">
              找回密码
            </van-button>
          </div>
        </van-cell-group>
      </div>

  </div>
  <div>
    <van-row>
      <van-col span="6">
        <router-link to="/register">注册账号</router-link>
      </van-col>
      <van-col span="12"></van-col>
      <van-col span="6">
        <router-link to="/login">登录账号</router-link>
      </van-col>
    </van-row>
  </div>
</div>
</template>

<script>
export default {
  name: "LoginView",
  data(){
    return{
      btn1:true,
      btn2:true,
      user:{//账号密码
        phone:"",
        password:"",
        code:"",
        city: "郑州",
        mobie: "华为"
      },
      psw:""
    }
  },
  methods:{
    checkPass(){
      //校验2次密码是否一致
      if(this.psw==this.user.password){
        this.btn2=false;
      }else {
        this.btn2=true;
      }
    },
    checkPhone(){
      //校验手机号是否存在
      this.axios.get("/api/user/checkphone.do?phone="+this.user.phone).then((r)=>{
        if(r.data.code==200){
          //存在  可以发送验证码
          this.btn1=false;
        }else {
          this.btn1=true;
          this.$toast("亲，你不知道手机号根本没有注册！");
        }
      })
    },
    sendCode(){
      //发送验证码
      this.axios.get("/api/sms/sendfind.do?phone="+this.user.phone).then((r)=>{
        if(r.data.code==200){
          //存在  可以发送验证码
          this.btn1=true;
          this.$toast("亲，验证码发送成功，请查看手机！");
        }else {
          this.btn1=false;
          this.$toast("亲，手机是不是欠费！");
        }
      })
    },
    findPass(){
      //密码修改
      this.axios.post("api/user/findpass.do",this.user).then((r)=>{
        if(r.data.code==200){
          //成功 跳转到首页
          this.$router.push("/login");
        }else {
          this.$toast(r.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>